<template>
	<view>
		<u-navbar title="我的购买" :fixed="true" :placeholder="true" :safeAreaInsetTop="true" :autoBack="false"
			leftIconColor="#666" titleStyle="color:#333" bgColor="#10191F" rightText="" @rightClick="right"
			@leftClick="leftClick"></u-navbar>


		<view class="main">
			<view class="tit">
				我的购买
				<!-- <text></text> -->
			</view>

			<view class="wrap">
				<view class="wrapitem" :style="item.status==1? 'opacity:0.6':'opacity:1' " v-for="item in selllist"
					:key="item.id" @click="selitem(item)">
					<view class="num">
						{{item.number>99?"99":item.number}}
					</view>
					<view class="imgwrap">
						<image class="logo" :src="item.car_logo" mode=""></image>
						<image v-if="item.level==3" class="bg" src="../../static/image/goldbg.png" mode=""></image>
						<image v-if="item.level==2" class="bg" src="../../static/image/yinbg.png" mode=""></image>
						<image v-if="item.level==1" class="bg" src="../../static/image/tongbg.png" mode=""></image>
						<image class="image" :src="item.images" mode=""></image>
						<view class="tip" v-if="item.status==1"  @click="">
							已装配
						</view>
					</view>
					<text v-if="item.level==1" class="text1">{{item.name}}</text>
					<text v-if="item.level==2" class="text2">{{item.name}}</text>
					<text v-if="item.level==3" class="text3">{{item.name}}</text>
				</view>
			</view>
			<noDatas :xxxList="selllist" :type="2" :status="status" :showMore="false"></noDatas>
		</view>
		<u-popup :show="show" mode="center" @close="show=false" bgColor="transparent">
			<view class="wrap2">
				<view class="wrapitem2">
					<view class="imgwrap2">
						<image class="logo2" :src="items.car_logo" mode=""></image>
						<image v-if="items.level==3" class="bg2" src="../../static/image/goldbg.png" mode=""></image>
						<image v-if="items.level==2" class="bg2" src="../../static/image/yinbg.png" mode=""></image>
						<image v-if="items.level==1" class="bg2" src="../../static/image/tongbg.png" mode=""></image>
						<image class="image2" :src="items.images" mode=""></image>
					</view>
					<text v-if="items.level==1" class="text11">{{items.name}}</text>
					<text v-if="items.level==2" class="text12">{{items.name}}</text>
					<text v-if="items.level==3" class="text13">{{items.name}}</text>
					<view class="price2">
						零售价：{{items.price}}
					</view>
					<view class="btn2" @click="getsell">
						挂售
					</view>
				</view>
			</view>

		</u-popup>
	</view>

</template>

<script>
	import {
		buyAccessoryGroup,
		sellAccessoryGroup,
		hallList,
		carindex,
		carforSale
	} from "../../api/mycar.js"
	export default {
		data() {
			return {
				selllist: [],
				page: 1,
				size: 30,
				selnum: "",
				status: 'loadmore', //加载前值为loadmore，加载中为loading，没有数据为nomore
				items: {},
				show: false
			}
		},
		onLoad() {
			this.getselllist()
		},
		methods: {
			getsell() {
				carforSale({
					id: this.items.id
				}).then(res => {
					if (res.code == 1) {
						this.show = false
						this.page = 1
						this.getselllist()
					}
					uni.$u.toast(res.msg)
				})
			},
			selitem(item) {
				if(item.status==0){
					this.show = true
					this.items = item
				}
				
				console.log(this.items, "s")
			},
			getselllist() {
				buyAccessoryGroup({
					page: this.page
				}).then(res => {

					if (res.code == 1) {
						let list = res.data.data;
						this.selllist = this.page == 1 ? list : this.selllist.concat(list);
						// console.log(this.goodlist2);
						if (list.length < this.size) this.status = 'nomore';
						else this.status = 'loading';
					}

				})
			},
			leftClick() {
				//获取页面栈的长度
				uni.navigateBack()

			},
		},
		onReachBottom() {
			if (this.status != 'nomore') {
				this.page = this.page + 1
				this.getselllist()
			}
		},
	}
</script>
<style>
	page {
		background: #10191F !important;
	}
</style>
<style scoped lang="scss">
	@font-face {
		font-family: 'iconfont2';
		src: url("~@/iconfont/YouSheBiaoTiHei.ttf");
	}

	/deep/ .u-navbar__content__title {
		color: #fff !important;
	}

	/deep/.uicon-arrow-left {
		color: #fff !important;
	}

	/deep/ .u-navbar__content__right__text {
		color: #fff !important;
	}

	.main {
		width: 690rpx;
		min-height: 502rpx;
		box-shadow: inset 0rpx 0rpx 20rpx 0rpx #1C85DB;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		margin: 0 auto;
		margin-top: 40rpx;
		padding-bottom: 30rpx;

		.tit {
			width: 690rpx;
			text-align: center;
			font-weight: 400;
			font-size: 32rpx;
			color: #FFFFFF;
			padding-top: 30rpx;
			position: relative;

			>text {
				position: absolute;
				right: 20rpx;
				top: 40rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: rgba(255, 255, 255, 0.8);
			}
		}

		.wrap {
			width: 690rpx;
			display: flex;
			flex-wrap: wrap;
			margin-top: 30rpx;

			.wrapitem {
				display: flex;
				flex-direction: column;
				margin-left: 30rpx;
				margin-right: 12rpx;
				margin-top: 20rpx;
				position: relative;

				.num {
					position: absolute;
					top: 4rpx;
					right: 4rpx;
					z-index: 5;
					width: 40rpx;
					height: 30rpx;
					background: #000000;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					// opacity: 0.7;
					font-weight: 500;
					font-size: 26rpx;
					color: #FFFFFF;
					text-align: center;
					line-height: 30rpx;
				}

				.imgwrap {
					width: 128rpx;
					height: 128rpx;
					position: relative;
					display: flex;
					align-items: center;
					justify-content: center;

					.tip {
						position: absolute;
						width: 108rpx;
						height: 38rpx;
						box-shadow: inset 0rpx 0rpx 16rpx 0rpx #1C85DB;
						border-radius: 6rpx 6rpx 6rpx 6rpx;
						font-weight: 400;
						font-size: 26rpx;
						color: #FFFFFF;
						text-align: center;
					}

					.logo {
						width: 30rpx;
						height: 32rpx;
						position: absolute;
						z-index: 9;
						top: 4rpx;
						left: 8rpx;
						border-top-left-radius:8rpx ;
					}

					.bg {
						width: 128rpx;
						height: 128rpx;
						position: absolute;
						top: 0rpx;
					}

					.image {
						transform: translate();
						width: 100rpx;
						height: 100rpx;
						border-radius: 12rpx 12rpx 12rpx 12rpx;
					}
				}

				.text1 {
					margin-top: 10rpx;
					width: 128rpx;
					text-align: center;
					font-weight: 400;
					font-size: 26rpx;
					color: #FDBE67;
				}

				.text2 {
					margin-top: 10rpx;
					width: 128rpx;
					text-align: center;
					font-weight: 400;
					font-size: 26rpx;
					color: #9FC1FF;
				}

				.text3 {
					margin-top: 10rpx;
					width: 128rpx;
					text-align: center;
					font-weight: 400;
					font-size: 26rpx;
					color: #FBF73B;
				}
			}


		}
	}

	.wrap2 {
		width: 656rpx;
		height: 500rpx;
		background: #111B23;
		box-shadow: inset 0rpx 0rpx 20rpx 0rpx #1C85DB;
		border-radius: 0rpx 0rpx 0rpx 0rpx;

		.wrapitem2 {
			display: flex;
			flex-direction: column;
			position: relative;
			justify-content: center;
			align-items: center;
			margin-top: 40rpx;

			.num2 {
				position: absolute;
				top: 4rpx;
				right: 4rpx;
				z-index: 99;
				width: 40rpx;
				height: 30rpx;
				background: #000000;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				// opacity: 0.7;
				font-weight: 500;
				font-size: 26rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 30rpx;
			}

			.btn2 {
				width: 594rpx;
				height: 80rpx;
				box-shadow: inset 0rpx 0rpx 20rpx 0rpx #1C85DB;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				font-weight: 400;
				font-size: 32rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 80rpx;
				margin: 0 auto;
				margin-top: 30rpx;
			}

			.price2 {
				width: 656rpx;
				text-align: center;
				font-weight: 400;
				font-size: 40rpx;
				color: #FFFFFF;
				font-family: iconfont2;
				margin-top: 24rpx;
			}

			.imgwrap2 {
				width: 180rpx;
				height: 180rpx;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;

				.logo2 {
					
					width: 30rpx;
					height: 32rpx;
					position: absolute;
					z-index: 9;
					top:4rpx;
					left: 20rpx;
					border-top-left-radius: 8rpx;
				}

				.bg2 {
					width: 158rpx;
					height: 158rpx;
					position: absolute;
					top: 0rpx;
				}

				.image2 {
					transform: translate();
					width: 100rpx;
					height: 100rpx;
					border-radius: 12rpx 12rpx 12rpx 12rpx;
				}
			}

			.text11 {
				margin-top: 10rpx;
				width: 128rpx;
				text-align: center;
				font-weight: 400;
				font-size: 26rpx;
				color: #FDBE67;
			}

			.text12 {
				margin-top: 10rpx;
				width: 128rpx;
				text-align: center;
				font-weight: 400;
				font-size: 26rpx;
				color: #9FC1FF;
			}

			.text13 {
				margin-top: 10rpx;
				width: 128rpx;
				text-align: center;
				font-weight: 400;
				font-size: 26rpx;
				color: #FBF73B;
			}
		}


	}
</style>